<template>
  <el-drawer class="drawer-container" :title="title" :visible.sync="visible" append-to-body size="800px">
    <el-form ref="form" :model="formdata" :rules="formrule" label-position="right" label-suffix=":" label-width="100px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="上级组织" prop="pid">
            <a-tree-select v-model="formdata.pid" placeholder="选择上级组织" :tree-data="localDict.tree_data"
                           :dropdown-style="{'z-index': '3000 !important', maxHeight: '300px', overflow: 'auto' }"
                           :replace-fields="{children:'children', label:'label', key:'id', value: 'id'}"
                           allow-clear style="width: 100%;"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="组织名称" prop="name">
            <el-input v-model="formdata.name" placeholder="请输入组织名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="组织编码" prop="code">
            <el-input v-model="formdata.code" placeholder="请输入组织名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="组织类型" prop="type">
            <el-select v-model="formdata.type" placeholder="请选择组织类型">
              <el-option v-for="item in localDict.dept_type" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="status" label="组织状态">
            <el-radio-group v-model="formdata.status">
              <el-radio v-for="dict in localDict.dept_status" :key="dict.value" :label="dict.value">
                {{ dict.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="显示排序" prop="sort">
            <el-input-number v-model="formdata.sort" :min="0" controls-position="right"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="组织描述">
        <el-input v-model="formdata.remark" :rows="3" placeholder="请输入组织描述" type="textarea"/>
      </el-form-item>
    </el-form>
    <div class="drawer-footer">
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
      <el-button @click="handleCancel">取 消</el-button>
    </div>
  </el-drawer>
</template>

<script>

import {getInfo, save} from "@/api/base";
import {getStaticData} from "@/api/common";
import {treeselect} from "@/api/tree";

export default {
  name: "DeptModel",
  data() {
    return {
      visible: false,
      title: '',
      baseUrl: '/system/dept/',
      formdata: {},
      formrule: {
        code: [
          {required: true, message: '组织编码不能为空', trigger: 'blur'},
          {pattern: /^\w{2,30}$/, message: '组织编码只能包含数字、字母、下划线,长度在2-30个字符', trigger: 'blur'}
        ],
        name: {required: true, message: '组织名称不能为空', trigger: 'blur'},
        type: {required: true, message: '组织类型不能为空', trigger: 'blur'},
        status: {required: true, message: '组织状态不能为空', trigger: 'blur'},
      },
      localDict: {
        tree_data: [],
        dept_type: [],
        dept_status: []
      }
    }
  },
  created() {
    this.getLocalDict();
  },
  methods: {
    add(pid) {
      this.getTreeselect()
      this.resetForm('form')
      this.formdata = {pid: pid}
      this.visible = true
      this.title = '新增组织'
    },
    edit(id) {
      this.resetForm('form')
      this.getTreeselect()
      getInfo(this.baseUrl, id).then(res => {
        this.formdata = res.data
        this.visible = true
        this.title = '修改组织'
      })
    },
    async getLocalDict() {
      await getStaticData('system-dept-type').then(res => {
        this.localDict.dept_type = res.data
      })
      await getStaticData('system-status').then(res => {
        this.localDict.dept_status = res.data
      })
    },
    async getTreeselect() {
      await treeselect(this.baseUrl).then(res => {
        this.localDict.tree_data = []
        this.localDict.tree_data.push({
          id: "0",
          key: "0",
          title: '顶级组织',
          // value: "0",
          // label: '顶级组织',
          hasChild: true,
          children: res.data.trees
        })
      });
    },
    handleSubmit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          save(this.baseUrl, this.formdata).then(() => {
            this.$modal.msgSuccess("保存成功");
            this.visible = false;
            this.resetForm('form')
            this.$emit('ok')
          });

        }
      });
    },
    handleCancel() {
      this.visible = false
      this.resetForm('form')
      this.$emit('close')
    }
  }
}
</script>
